<template>
  <div>
    <el-table :data="myCompleteTasksList" style="width: 100%" height="800">
      <el-table-column prop="name" label="任务名称"/>
      <el-table-column prop="currentTask" label="当前节点"/>
      <el-table-column prop="startUserId" label="发起人"/>
      <el-table-column prop="assignee" label="办理人"/>
      <el-table-column prop="startTime" label="流程启动时间"/>
      <el-table-column label="操作">
        <template #default="scope" >
          <el-button size="small" type="primary" @click="seeTask(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right;padding-top: 1%">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          background layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"/>
    </div>
    <div id="deptCheckOutSideProject">
      <el-dialog v-model="outSideProjectFlag" fullscreen title="出差计划">
        <el-row>
          <el-col :span="16">
            <el-descriptions class="margin-top" :column="6" border>
              <el-descriptions-item label="姓名">
                {{outSideProjectCheck.fromManName}}
              </el-descriptions-item>
              <el-descriptions-item label="部门">
                {{outSideProjectCheck.sysDeptName}}
              </el-descriptions-item>
              <el-descriptions-item label="岗位">
                {{outSideProjectCheck.postName}}
              </el-descriptions-item>
            </el-descriptions>
            <div v-for="(item,index) in outSideProjectCheck.datePlan">
              <h4 style="float: left">{{item.date}}</h4>
              <div >
                <el-table v-for="(item2,index2) in item.times" :data="getTableData(item2)" style="width: 100%">
                  <el-table-column prop="period" :label="index2 === 0 ? '时段' : ''" />
                  <el-table-column prop="unit" :label="index2 === 0 ? '拜访单位' : ''" />
                  <el-table-column prop="offices" :label="index2 === 0 ? '拜访科室' : ''" />
                  <el-table-column prop="character" :label="index2 === 0 ? '拜访人物' : ''" />
                  <el-table-column prop="objective" :label="index2 === 0 ? '拜访目的' : ''" />
                  <el-table-column prop="transportation" :label="index2 === 0 ? '交通工具' : ''" />
                </el-table>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="height:80vh;overflow-y: scroll">
              <el-timeline>
                <el-timeline-item v-for="item in checkTimeInfos" center :timestamp="item.startTime" placement="top">
                  <el-card>
                    <h4>{{item.taskName}}</h4>
                    <p>{{item.comment}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-row>

      </el-dialog>
    </div>
    <div id="deptCheckOutSide">
      <el-dialog v-model="outSideFlag" fullscreen>
        <el-row>
          <el-col :span="16">
            <el-descriptions
                class="margin-top"
                :column="6"
                border>
              <el-descriptions-item label="姓名">
                {{deptoutSide.sysUserName}}
              </el-descriptions-item>
              <el-descriptions-item label="部门">
                {{deptoutSide.sysDeptName}}
              </el-descriptions-item>
              <el-descriptions-item label="岗位">
                {{deptoutSide.job}}
              </el-descriptions-item>
              <el-descriptions-item label="工作计划">
                {{deptoutSide.planeFlag ==1?'有':'无'}}
              </el-descriptions-item>
              <el-descriptions-item label="通过审批">
                {{deptoutSide.agreeFlag==1?'是':'否'}}
              </el-descriptions-item>
              <el-descriptions-item label="申请人">
                {{deptoutSide.sysUserName}}
              </el-descriptions-item>
              <el-descriptions-item label="出发时间">
                {{deptoutSide.departureTime}}
              </el-descriptions-item>
              <el-descriptions-item label="返回时间">
                {{deptoutSide.returnTime}}
              </el-descriptions-item>
              <el-descriptions-item label="出差性质">
                {{deptoutSide.evectionType}}
              </el-descriptions-item>
              <el-descriptions-item label="出发地">
                {{deptoutSide.departurePlace}}
              </el-descriptions-item>
              <el-descriptions-item label="目的地">
                {{deptoutSide.destinationPlace}}
              </el-descriptions-item>
              <el-descriptions-item label="交通工具">
                {{deptoutSide.transportation}}
              </el-descriptions-item>
            </el-descriptions>
            <el-form :model="deptoutSide" label-width="120px">
              <el-form-item label="出差计划">
                <el-input type="textarea" v-model="deptoutSide.evectionProject" readonly></el-input>
              </el-form-item>
              <el-form-item label="出差目的">
                <el-input type="textarea" v-model="deptoutSide.evectionTarget" readonly></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="8">
            <div style="height:90vh;overflow-y: scroll">
              <el-timeline>
                <el-timeline-item v-for="item in checkTimeInfos" center :timestamp="item.startTime" placement="top">
                  <el-card>
                    <h4>{{item.taskName}}</h4>
                    <p>{{item.comment}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref,reactive} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus'
import {useUsersStore} from "../../store/userInfo.ts";
import {getFromByProcessInstanceId, history, myCompleteHistory, myCompleteTasks} from "../../api/task";
let pageNum = ref(1);
let pageSize = ref(18);
let total = ref(0);
let myCompleteTasksList = ref([]);

let outSideFlag = ref(false);
let deptoutSide = ref({
  sysUserName:'',
  sysDeptName:'',
  sysUserid:'',
  sysDeptid:'',
  planeFlag:'',
  agreeFlag:'',
  departureTime:'',
  returnTime:'',
  evectionType:'',
  departurePlace:'',
  destinationPlace:'',
  evectionProject:'',
  evectionTarget:'',
  transportation:'',
  togetherMan:'',
  fromMan:'',
  deptLeader:'',
  job:'',
  taskId:'',
  checkComment:'',
});
let checkTimeInfos  = ref([]);
let outSideProjectFlag = ref(false);
let outSideProjectCheck = ref({})
onMounted(async () =>{
  await queryMyCompleteTasks();
})
const queryMyCompleteTasks = async () =>{
  let res = await myCompleteTasks({pageNum: pageNum.value,pageSize :pageSize.value});
  total.value =res.data.total;
  myCompleteTasksList.value=res.data.rows;
  console.log(res)
}
const handleCurrentChange = async (val: number) => {
  pageNum.value = val;
  await queryMyCompleteTasks()
}
const seeTask = async (row) => {
  let splitElement = row.currentFormKey
  console.log(row)
  let res = await getFromByProcessInstanceId({processInstanceId:row.processInstanceId,formKey:row.currentFormKey});
  console.log(res)
  let res2x = await myCompleteHistory({processInstanceId: row.processInstanceId});
  checkTimeInfos.value =res2x.data.rows
  let parse = JSON.parse(res.formData);
  switch (splitElement) {
    case import.meta.env.VITE_OUTSIDE_Plan:
      outSideProjectCheck.value = parse;
      outSideProjectFlag.value = true;
      outSideProjectCheck.value.taskId = row.taskId;
      break;
    case import.meta.env.VITE_OUTSIDE_APPLAY:
      deptoutSide.value= parse;
      deptoutSide.value.taskId = row.taskId;
      outSideFlag.value =true;
      break;
    default:
      ElMessage.error("暂不支持审批该流程")
  }
}
const getTableData=(item)=>{
  return [item];
}
</script>
<style scoped>

</style>
